<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
  import {
    startRecord,
    saveRecord
  } from '@/utils/recorder.js'

  export default {
    // 可以在这加个loading事件
    beforecreate() {
      //console.log("beforecreate >>>")
    },
    watch: {
      $route(to, route) {
        //console.log("$route >>>", to, route)
        // 保存当前页的路由记录
        saveRecord(to);
        //开启新页面的路由记录
        startRecord(to, route);
      }
    },
    // 在这结束loading，还做一些初始数据的获取，实现函数自执行
    created() {
      //console.log("created >>>")
    },
    // 在这发起后端请求，拿回数据，配合路由钩子做一些事情
    mounted() {
      //console.log("mounted >>>")
    },
    // 你确认删除XX吗？
    beforeDestroy() {
      //console.log("beforeDestroy >>>")
    },
    //当前组件已被删除，清空相关内容
    destroyed() {
      //console.log("destroyed >>>")
    },
  }
</script>

<style>
  html,
  body {
    padding: 0;
    margin: 0;
  }

  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    height: 100vh;
  }

  .body-main {
    margin: 3px;
    padding: 3px;
  }

  /* 禁用输入框样式调整 */
  .el-input.is-disabled .el-input__inner {
    background-color: #F5F7FA;
    border-color: #E4E7ED;
    color: #8b8b8b !important;
    cursor: not-allowed;
  }

  /* 树节点选中高亮背景色调整 */
  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background-color: #ffebc3 !important;
  }

  /* zTree 树节点行间距调整 */
  #treeDemo li {
    margin: 5px 0;
  }

  /* zTree 树节点字体调整 */
  #treeDemo li span {
    font-size: 14px;
  }

  #roleTreeId li {
    margin: 5px 0;
  }

  #roleTreeId li span {
    font-size: 14px;
  }

  #menuTreeId li {
    margin: 5px 0;
  }

  #menuTreeId li span {
    font-size: 14px;
  }

  #treeDemoRight li {
    margin: 5px 0;
  }

  #treeDemoRight li span {
    font-size: 14px;
  }

  /* 表格全局样式修改 */
  .el-table td {
    padding: 6px 0 !important;
  }

  /* 消息提醒弹窗级别 */
  .el-message {
    z-index: 9999 !important;
  }

  /* 侧边栏样式改造 */
  .is-opened {
    border-left: 3px solid #1890ff;
    box-sizing: border-box;
  }

  .my-sidebar__body {
    background-color: rgba(0, 21, 41, 0.55);
  }

  .my-sidebar.is-shadow.is-black {
    background-image: url('./assets/navbar-img-3.jpg');
  }

  .is-black.my-menu {
    background-color: transparent !important;
  }

  .is-black.my-menu li.el-menu-item.is-active {
    background-color: red !important;
  }

  /* 页面中顶部筛选表单的下边距 */
  .el-form .el-form-item {
    margin-bottom: 5px;
  }

  /* loading 显示位置调整为中偏上 */
  .el-loading-spinner {
    top: 45% !important;
    margin-top: -21px;
    width: 100%;
    text-align: center;
    position: absolute;
  }
</style>
